import {ActionType, ProCard} from '@ant-design/pro-components';
import {useRef, useState} from 'react';
import LeftTable from "@/pages/MonthlyPlanning/components/LeftTable";
import RightTable from "@/pages/MonthlyPlanning/components/RightTable";

const Index = () => {
  const [clickMonthlyPlanningNumber, setClickMonthlyPlanningNumber] = useState({} as API.MonthlyPlanningNumberDTO);
  const leftActionRef = useRef<ActionType>();
  const rightActionRef = useRef<ActionType>();
  const onClickRow = (record: API.MonthlyPlanningNumberDTO) => {
    rightActionRef.current?.reload();
    setClickMonthlyPlanningNumber(record);
  };

  return (
    <ProCard split="vertical">
      <ProCard colSpan="55%" ghost>
        <LeftTable onClickRow={onClickRow} actionRef={leftActionRef}/>
      </ProCard>
      <ProCard ghost>
        <RightTable clickMonthlyPlanningNumber={clickMonthlyPlanningNumber} leftActionRef={leftActionRef} rightActionRef={rightActionRef}/>
      </ProCard>
    </ProCard>
  );
};

export default Index;
